<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../three.min.js"></script>
</head>
<body>
    <script>
        var width = window.innerWidth;
        var height = window.innerHeight

        var renderer = new THREE.WebGLRenderer()
        renderer.setSize(width,height)
        document.body.appendChild(renderer.domElement)

        var scene = new THREE.Scene()

        var camera = new THREE.PerspectiveCamera(45,width/height,1,8000)
        camera.position.set(200,400,1000)
        camera.up.set(0,1,0)
        /* 换中心 假设太阳在这*/
        camera.lookAt(new THREE.Vector3(200,0,0))
        

        var geometry = new THREE.BoxGeometry(200,200,200)
        console.log(geometry)
        var count = geometry.attributes.position.count
        /*使用顶点颜色*/
        var colors = new Float32Array(count*3)
        var color = new THREE.Color()
        /* 一个面中的颜色都相同 */
        for(let i = 0; i < geometry.index.count; i+=3) {
            let tempColor = Math.random()*0xffffff;
            color.setHex(tempColor)

            let verticesIndex1 = geometry.index.array[i]
            let verticesIndex2 = geometry.index.array[i+1]
            let verticesIndex3 = geometry.index.array[i+2]
            //console.log(verticesIndex1,verticesIndex2,verticesIndex3)
            /* 一个面 3个顶点 对应9个值*/
            //第一个顶点
            colors[verticesIndex1*3] = color.r
            colors[verticesIndex1*3+1] = color.g
            colors[verticesIndex1*3+2] = color.b

            colors[verticesIndex2*3] = color.r
            colors[verticesIndex2*3+1] = color.g
            colors[verticesIndex2*3+2] = color.b
            
            colors[verticesIndex3*3] = color.r
            colors[verticesIndex3*3+1] = color.g
            colors[verticesIndex3*3+2] = color.b
        }
        geometry.setAttribute("color",new THREE.BufferAttribute(colors,3))
        console.log(geometry)
        var material = new THREE.MeshBasicMaterial({vertexColors:THREE.VertexColors})
        var earth = new THREE.Mesh(geometry,material)
        earth.position.set(0,0,0)

        //太阳 SphereGeometry
        var taiGeometry = new THREE.BoxGeometry(100,100,100)
        var taimaterial = new THREE.MeshBasicMaterial( {color: 0x0fff00} );
        var tai = new THREE.Mesh(taiGeometry,taimaterial)
        var obj = new THREE.Group()
        obj.add(earth)
        obj.add(tai)
        console.log(tai)
        //太阳中心点
        obj.position.set(200,0,0)
        //地球离太阳 300米外旋转
        earth.position.set(0,300,0)
        scene.add(obj)
        
        //网格
        var helper = new THREE.GridHelper(2000,50,0x000ff,0x808080) //size,step
        console.log(helper)
        scene.add(helper)
        function animation() {
            requestAnimationFrame(animation)
            obj.rotation.z+=0.01
            tai.rotation.z-=0.01
            
            earth.rotation.y = earth.rotation.y + 0.1
            var rotaAngle = new THREE.Vector3(0,1,0)
            //console.log(tai.rotateOnAxis)
            //tai.rotateOnAxis(rotaAngle,0.01)
            
        
            //mesh.rotation.x = mesh.rotation.x + 0.01
            renderer.render(scene,camera)
        }
        
        animation()
    </script>
</body>
</html>